<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '20px',
    }"
  >
    <div class="wrap-other-roll">
      <el-form label-width="120px" class="form" :model="form" size="medium">
        <el-form-item label="主题风格" required>
          <el-radio-group v-model="form.theme.lock">
            <el-radio :label="false">主题色</el-radio>
            <el-radio :label="true">全站置灰色</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主题色" required v-if="!form.theme.lock">
          <el-color-picker
            v-model="form.theme.color"
            :predefine="predefineColors"
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="客服连接" required>
          <el-input
            v-model.trim="form.theme.helpLink"
            clearable
            maxlength="100"
            placeholder="请输入客服连接"
          ></el-input>
        </el-form-item>
        <el-form-item label="APP二维码" required>
          <web-upload
            @upload="(e) => upload(e, 'appScanLogo')"
            accept="image/*"
          />
          <img
            v-if="form.theme.appScanLogo"
            :src="form.theme.appScanLogo"
            class="form-img"
          />
        </el-form-item>
        <el-form-item label="小程序二维码" required>
          <web-upload
            @upload="(e) => upload(e, 'programScanLogo')"
            accept="image/*"
          />
          <img
            v-if="form.theme.programScanLogo"
            :src="form.theme.programScanLogo"
            class="form-img"
          />
        </el-form-item>
        <el-form-item label="公司名称" required>
          <el-input
            v-model.trim="form.contact.companyName"
            clearable
            maxlength="30"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" required>
          <el-input
            v-model.trim="form.contact.tel"
            clearable
            maxlength="30"
            placeholder="请输入电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" required>
          <el-input
            v-model.trim="form.contact.email"
            clearable
            maxlength="30"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" required>
          <el-input
            v-model.trim="form.contact.address"
            clearable
            maxlength="50"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="版权信息" required>
          <el-input
            v-model.trim="form.domain.copyright"
            clearable
            maxlength="50"
            placeholder="请输入版权信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="备案信息" required>
          <el-input
            v-model="form.domain.domain"
            type="textarea"
            maxlength="200"
            resize="none"
            placeholder="请输入备案信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="证书信息">
          <el-input
            v-model.trim="form.domain.certificate"
            clearable
            maxlength="50"
            placeholder="请输入证书信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="网站LOGO">
          <web-upload @upload="(e) => upload(e, 'logo')" accept="image/*" />
          <img
            v-if="form.domain.logo"
            :src="form.domain.logo"
            class="form-img"
          />
        </el-form-item>
        <el-form-item style="text-align: center">
          <span
            class="wrap-btn wrap-success"
            v-if="$checkPermission(101)"
            @click="save"
            >保存</span
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      predefineColors: [
        '#45ab49',
        '#3AD9BD',
        '#FDAD4E',
        '#F46262',
        '#1693FF',
        '#8D97A3',
        '#5A6875',
        '#333333',
      ],
      form: {
        theme: { lock: false, color: '#333333' },
        contact: {},
        domain: {},
      },
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取列表
      this.$axios.get('/admin/portal/theme/find').then((data) => {
        this.form = {
          theme: { lock: false, color: '#333333' },
          contact: {},
          domain: {},
        }
        if (data.code == 200) {
          if (data.data) {
            this.form = data.data
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    save() {
      //保存
      if (!this.form.theme.helpLink) {
        this.$message.error('请输入客服连接')
        return
      }
      if (!this.form.theme.appScanLogo) {
        this.$message.error('请上传APP二维码')
        return
      }
      if (!this.form.theme.programScanLogo) {
        this.$message.error('请上传小程序二维码')
        return
      }
      if (!this.form.contact.companyName) {
        this.$message.error('请输入公司名称')
        return
      }
      if (!this.form.contact.tel) {
        this.$message.error('请输入电话')
        return
      }
      if (!this.form.contact.email) {
        this.$message.error('请输入邮箱')
        return
      }
      if (!this.form.contact.address) {
        this.$message.error('请输入地址')
        return
      }
      if (!this.form.domain.copyright) {
        this.$message.error('请输入版权信息')
        return
      }
      if (!this.form.domain.domain) {
        this.$message.error('请输入备案信息')
        return
      }
      this.$axios.post('/admin/portal/theme/add', this.form).then((data) => {
        if (data.code == 200) {
          this.$message.success('操作成功！')
          this.itemList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    upload(data, type) {
      //上传
      if(type == 'logo'){
        this.$set(this.form.domain, type, data.fileDomain + data.url)
      } else {
        this.$set(this.form.theme, type, data.fileDomain + data.url)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.form {
  width: 600px;
  margin: 20px auto;
  &-img {
    position: absolute;
    left: 100px;
    top: 0;
    height: 82px;
  }
}
</style>
